<html xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui" >

    <ui:composition template="layout.xhtml">
        <ui:define name="corpo">
            <h:form>
                <div id="breadcrumb">
                    <p:commandLink  actionListener="#{managerIndex.redirect('index.xhtml')}" value="Inicio" update="@form" immediate="true"/> >
                    <p:commandLink  actionListener="#{managerIndex.redirect('indexImovel.xhtml')}" value="Imóvel" update="@form" immediate="true"/> >
                    <p:commandLink  value="Plotagem" update="@form" immediate="true"/>
                </div>
            </h:form>

            <p:panel id="panelCriarImovel" header="Plotagem dos Municípios">
                <p:focus for="panelCriarImovel"/>
                <h:form acceptcharset="utf-8" id="interpiForm" enctype="multipart/form-data"> 
                    <p:messages id="msg"/>
                    <fieldset class="ui-fieldset">
                        <legend>
                            <h:outputLabel value="Mapa  "/>  </legend>

                        <h:panelGrid columns="1" styleClass="textAlignRight" columnClasses="textAlignRight">
                            <p:gmap center="#{managerVerStateCoord.centerMap}" id="gmapConflict"
                                    zoom="#{managerVerStateCoord.zoomMap}" type="HYBRID" 
                                    style="width:910px;height:500px" model="#{managerVerStateCoord.polygonModel}">

                                <p:ajax event="stateChange" disabled="true" listener="#{managerVerStateCoord.onStateChange}"  />  
                                <p:ajax event="overlaySelect" listener="#{managerVerStateCoord.onMarkerSelect}" />  

                                <p:gmapInfoWindow>  
                                    <p:outputPanel style="text-align:center;display:block;margin:auto:">  
                                        <h:outputText escape="false" value="#{managerVerStateCoord.marker.title}" />  
                                        <br /> 
                                        <h:outputText escape="false" value="#{managerVerStateCoord.marker.data}"/>
                                    </p:outputPanel>  

                                </p:gmapInfoWindow>
                            </p:gmap>
                            <p:row >
                                <p:panel header="Elementos do Mapa">
                                <ui:repeat value="#{managerVerStateCoord.lstViewMapInterpi}" var="lvmi">
                                    <p:selectBooleanCheckbox itemLabel="#{lvmi.nome}" >  
                                        <p:ajax update=":interpiForm:gmapConflict"  listener="#{managerVerStateCoord.remove(lvmi.lstPol, lvmi.lstLin, lvmi.marker)}"/>  
                                    </p:selectBooleanCheckbox>
                                    <br /> 
                                </ui:repeat>
                                </p:panel>
                             </p:row>
                        </h:panelGrid>
                        <h:panelGrid columns="2" styleClass="textAlignRight" columnClasses="textAlignRight">
                            <f:facet name="header" >
                                <h:outputLabel value="Legenda" style="text-align: center; float: none; "/>
                            </f:facet>

                            <h:outputLabel value="Municípios: "/>
                            <img src="http://maps.google.com/mapfiles/ms/micons/blue-dot.png" style="width: 70%"/>
                            <h:outputLabel value="Área Interpi: "/>
                            <img src="http://maps.google.com/mapfiles/ms/micons/red-dot.png" style="width: 70%"/>
                        </h:panelGrid>
                    </fieldset>

                </h:form>
            </p:panel>
            <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
        </ui:define>
    </ui:composition>
</html>